import styled from 'styled-components'

export const FooterWrapper = styled.div`
  height: 162px;
  background-color: #f2f2f2;
  border-top: 1px solid #d3d3d3;
  padding: 20px 0 55px;
  .content {
    display: flex;
    justify-content: space-between;
  }
`

export const FooterLeft = styled.div`
  .music-link {
    a {
      padding: 10px;
      &:first-child {
        padding-left: 0;
      }
    }
  }
  .music-info {
    display: flex;
    height: 28px;
    align-items: center;
    span {
      margin-right: 10px;
    }
  }
`

export const FooterRight = styled.ul`
  display: flex;
  align-items: center;
  li {
    margin-right: 30px;
    a {
      display: block;
      width: 50px;
      height: 45px;
      margin-bottom: 5px;
      background-image: url(${require("@/assets/img/sprite_footer_02.png").default});
      background-size: 110px 444px;
      background-position: 0 0px;
    }
    &:nth-child(2) a {
      background-position: 0 -50px;
    }
    &:nth-child(3) a {
      background-position: -60px 0px;
    }
    &:nth-child(4) a {
      background-position: -60px -50px;
    }
    .music-amped {
      display: block;
      width: 50px;
      height: 10px;
      background: url(${require("@/assets/img/sprite_footer_01.png").default}) no-repeat 0 0;
      background-size: 170px 110px;
    }
  }
`